<template>
    <div class="bar" ref="myChart">

    </div>
</template>

<script>
    import axios from 'axios'
    import bus from "@/bus/bus";
    import * as echarts from 'echarts'
    export default {
        name: "Bar",
        data(){
            return{
                xArrs:['xx区1','xx区2','xx区3','xx区4','xx区5'],
                yArrs:[40,34,45,87,70]
            }
        },
        mounted() {
            //接收搜索的信息
            bus.$on('shareUserInput',(data)=>{
                let nameBar=data.userInput
                console.log('Bar收到的参',nameBar)
            })
            //连接后端接口
            /*axios.get('').then(
                response => {
                    console.log('连接成功！',response.data)
                    //获取省/市/区的数据
                    let citys=response.data.data
                    for(let i=0;i<citys.length;i++){
                        this.xArrs.name=citys[i].name
                        this.yArrs.value=citys[i].title
                    }
                    console.log(this.xArrs,this.yArrs)
                },
                error =>{
                    console.log('连接失败！',error.message)
                }
            )*/

            //初始化
            let myEchart = echarts.init(this.$refs.myChart)
            //设置echart数据
            let xData=this.xArrs
            let yData=this.yArrs
            //设置配置项
            let option={
                title:{
                    text:'疫情预警',
                    textStyle:{
                        color:'#FFFFFF',
                        opacity:0.8
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                xAxis:{
                    //配置x轴的参数
                    data:xData,
                    type:'category',//类目轴 坐标轴类型 value数据轴
                    axisLine:{
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                yAxis:{
                    axisLine:{
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [
                    //系列 配置图表类型
                    {
                        name:'Details',
                        type:'bar',//系列类别
                        data:yData,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.8)'
                        },
                        itemStyle:{
                            color:'#0281D0'
                        },
                        //最大值/最小值
                        markPoint:{
                            data:[//标记的数组，每一项都是一个对象
                                {
                                    type:'max',
                                    name:'最大值',
                                    itemStyle: {
                                        color: '#a90000'
                                    }
                                },
                                {
                                    type:'min',
                                    name:'最小值',
                                    itemStyle: {
                                        color: '#67C23A'
                                    }
                                }
                            ]
                        },
                        //图表的标线
                        markLine:{
                            data:[
                                {
                                    type:'average',
                                    name:'平均值',
                                    itemStyle: {
                                        color: '#F56C6C'
                                    }
                                }
                            ]
                        }
                    }

                ]
            }
            //绘制图表
            myEchart.setOption(option)
        }
    }
</script>

<style scoped>
    .bar{
        height: 50%;
    }

</style>